<template>
  <div class="box">
    <div class="box_main">
      <div class="box_title">
        <div class="box_title_type">通知公告</div>
        <div class="box_title_txt overflowEllipsis">
          党员固定学习日制度党员固定学习日制度党员固定学习日制度
        </div>
      </div>
      <div class="box_main_txt">
        <div class="box_main_txt_time overflowEllipsis">
          2017-04-11 9:00 延安市委组织部第一支部
        </div>
        <div class="box_main_txt_main" v-html="details.content"></div>
        <div class="forwarding_but">
          <i class="icon iconfont icon-bianji"></i>转发至聊天群
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import taskApi from "../../requestApi/taskApi";
import { Toast } from "mint-ui";
export default {
  components: {},
  data() {
    return {
      details: {
        title:
          "李明远：不断增强基层党组织的凝聚力战斗力加快城改步伐为百姓打造依据新生活",
        content: ""
      }
    };
  },
  created: function() {},
  mounted() {
    let self = this;
    self.baseUserMessageDistributeFun();
    window.getAppgetUserToken = function(val) {
      self.baseUserInfoFun(val);
      self.listFun();
    };
    this.titleFun({
      title: "详情"
    });
  },
  methods: {
    async listFun() {
      let self = this;
      let params = {
        id: this.$route.query.id
      };
      let res = await taskApi.GetApiWebmessageboardlist(params);
      if (res.statusCode == 200) {
      } else {
        Toast({
          message: res.statusMessage,
          position: "bottom"
        });
      }
    }
  },
  filters: {},
  watch: {},
  computed: {}
};
</script>
<style scoped>
.box_main_txt_time {
  height: 0.5867rem;
  line-height: 0.5867rem;
  width: 100%;
  font-size: 0.32rem;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  color: rgba(135, 130, 130, 1);
  text-align: center;
  margin-top: 0.1333rem;
}
.box_main_txt_main {
  margin-top: 0.1867rem;
  width: calc(100% - 0.2667rem);
  margin-left: 0.1333rem;
  font-size: 0.3733rem;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  color: rgba(100, 99, 104, 1);
  line-height: 0.6133rem;
  margin-bottom: 0.4rem;
}
.box_main {
  width: calc(100% - 0.5333rem);
  font-size: 0.3733rem;

  margin-top: 0.4rem;
  margin-left: 0.2667rem;
  min-height: 2.6667rem;
  border-radius: 0.08rem;
}
.box_main_txt {
  border-top-left-radius: 0.2667rem;
  border-top-right-radius: 0.2667rem;
  min-height: 2.6667rem;
  overflow: hidden;
  width: 100%;
  background-color: #fff;
  border: 0.0267rem solid #fff;
  margin-bottom: 0.6667rem;
}
.box_title_txt {
  width: calc(100% - 0.5333rem);
  height: 0.5867rem;
  line-height: 0.5867rem;
  text-align: center;
  font-size: 0.4533rem;
  font-family: MicrosoftYaHei;
  font-weight: 400;
  color: rgba(0, 0, 0, 1);
  position: absolute;
  top: 0.7733rem;
  left: 0.2667rem;
}
.box_title_type {
  position: absolute;
  width: 2.6667rem;
  height: 0.56rem;
  line-height: 0.56rem;
  font-size: 0.32rem;
  color: #fff;
  background-color: #ff6600;
  top: -0.1333rem;
  left: calc(50vw - 0.5333rem - 1.3333rem);
  z-index: 2003;
  text-align: center;
  border-radius: 0.1067rem;
}
.box_title::after {
  position: absolute;
  bottom: 0;
  left: 0.1333rem;
  width: calc(100% - 0.2667rem);
  height: 0.0267rem;
  content: "";
  background-color: rgba(27, 27, 27, 0.2);
}
.box_title {
  width: 100%;
  height: 1.7067rem;
  position: relative;
  border-bottom-left-radius: 0.2667rem;
  border-bottom-right-radius: 0.2667rem;
  border: 0.0267rem solid #fff;
  background-color: #fff;
}
.forwarding_but {
  width: 3.5733rem;
  height: 0.7733rem;
  border-radius: 0.4rem;
  background-color: #eb6100;
  text-align: center;
  line-height: 0.7733rem;
  color: #fff;
  font-size: 0.32rem;
  margin: 0 auto;
  margin-top: 4rem;
  margin-bottom: 1.0667rem;
}
.box {
  position: relative;
  background: #f1f5fd;
  overflow: hidden;
  width: 100%;
  height: 100vh;
  overflow-y: scroll;
}
</style>
